<template>
  <scroll-view scroll-y style="height: 100vh;" class="scroll-container">
    <!-- 1. 顶部轮播图（自动轮播） -->
	<view class="section">
	  <text class="title">泉州风光</text>
    <swiper class="swiper" autoplay interval="3000" circular>
      <swiper-item>
        <image src="/static/city1.jpg" mode="widthFix" class="swiper-img"></image>
      </swiper-item>
      <swiper-item>
        <image src="/static/city2.jpg" mode="widthFix" class="swiper-img"></image>
      </swiper-item>
      <swiper-item>
        <image src="/static/city3.jpg" mode="widthFix" class="swiper-img"></image>
      </swiper-item>
    </swiper>
	</view>

    <!-- 2. 城市介绍（富文本） -->
      <view class="section">
        <text class="title">城市介绍</text>
        <!-- 新增 .city-intro 类，用于单独控制文字样式 -->
        <rich-text :nodes="cityIntro" class="city-intro"></rich-text>
      </view>

    <!-- 3. 探索进度（进度条） -->
    <view class="section">
      <text class="title">探索进度</text>
      <progress percent="60" show-info stroke-width="10" color="#007AFF"></progress>
    </view>

    <!-- 4. 城市选择（省市区三级联动） -->
    <view class="section">
      <text class="title">选择城市</text>
      <picker mode="region" @change="onCityChange">
        <view class="picker">当前选择：{{province}}-{{city}}-{{district}}</view>
      </picker>
    </view>
	
	<!-- 5.：城市宣传与背景音乐 -->
	    <view class="section">
	      <!-- 模块总标题 -->
	      <text class="title">城市宣传</text>
	      
	      <!-- （1）. 视频部分 -->
	      <view class="video-wrapper">
	        <video :src="videoUrl" controls poster="/static/video-poster.jpg" class="video"></video>
	      </view>
	      
	      <!-- （2）. 音乐部分 -->
	      <view class="audio-wrapper">
	        <text class="audio-subtitle">泉州背景音乐</text> 
	        <view class="audio-group">
	          <!-- 播放/暂停按钮 -->
	          <button class="audio-btn" @click="toggleMusic">
	            <text class="btn-text">{{ isPlaying ? '暂停' : '播放' }}</text>
	            <view class="btn-icon">
	              <view v-if="!isPlaying" class="play-icon"></view>
	              <view v-else class="pause-icon">
	                <view class="pause-line"></view>
	                <view class="pause-line"></view>
	              </view>
	            </view>
	          </button>
	          <!-- 音乐描述 -->
	          <text class="audio-desc">泉州南音-泉州传统乐团演奏</text>
	          <!-- 进度条 -->
	          <slider class="audio-slider" :value="progress" @change="adjustProgress" min="0" max="100"></slider>
	        </view>
	      </view>
	    </view>

    <!-- 6. 偏好设置（单选+开关+滑块） -->
    <view class="section">
      <text class="title">偏好设置</text>
      
      <!-- 出行方式（单选） -->
      <view class="preference-item">
        <text>出行方式：</text>
        <radio-group @change="onTravelChange">
          <radio value="bus">公交</radio>
          <radio value="drive">自驾</radio>
          <radio value="walk">步行</radio>
        </radio-group>
      </view>
      
      <!-- 7.显示推荐景点（开关） -->
      <view class="preference-item">
        <text>显示推荐景点：</text>
        <switch :checked="showRecommend" @change="onRecommendChange"></switch>
      </view>
      
      <!-- 8.探索半径（滑块） -->
      <view class="uni-title">探索半径（km）</view>
      <view>
          <slider value="10" @change="sliderChange" min="1" max="20" show-value />
      </view>
    </view>

   
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      // 富文本内容
      cityIntro: `<p><strong>泉州</strong>，简称“鲤”，别名“鲤城”，地处中国华东地区，是福建省地级市，也是国务院批复确定的海峡西岸经济区中心城市之一、现代化工贸港口城市。</p><p style="color: #007AFF;">泉州是国家历史文化名城，历史悠久，经济开发早在周秦时期就已开始。宋元时期，泉州一度成为世界第一大港，有着“东方第一大港”的美誉，是联合国唯一认定的海上丝绸之路起点，列入国家“一带一路”倡议的21世纪海上丝绸之路先行区。</p>`,
      // 城市选择数据
      province: '福建省',
      city: '泉州市',
      district: '丰泽区',
      // 偏好设置数据
      travelMode: 'bus',
      showRecommend: true,
      radius: 10,
      // 视频地址
      videoUrl: '/static/city-video.mp4',
	  // 音乐相关数据
	        isPlaying: false, // 播放状态
	        progress: 0, // 播放进度
	        audioCtx: null, // 音频上下文实例
	        musicUrl: "/static/city-music.mp3" // 音乐文件路径
    };
  },
  mounted() {
      // 初始化音频上下文
      this.audioCtx = uni.createInnerAudioContext();
      this.audioCtx.src = this.musicUrl;
  
      // 监听播放事件
      this.audioCtx.onPlay(() => {
        this.isPlaying = true;
      });
  
      // 监听暂停事件
      this.audioCtx.onPause(() => {
        this.isPlaying = false;
      });
  
      // 监听时间更新，实时计算进度
      this.audioCtx.onTimeUpdate(() => {
        if (this.audioCtx.duration > 0) {
          this.progress = (this.audioCtx.currentTime / this.audioCtx.duration) * 100;
        }
      });
    },
  methods: {
    // 城市选择变更
    onCityChange(e) {
      this.province = e.detail.value[0];
      this.city = e.detail.value[1];
      this.district = e.detail.value[2];
    },
    // 出行方式变更
    onTravelChange(e) {
      this.travelMode = e.detail.value;
    },
    // 推荐景点开关变更
    onRecommendChange(e) {
      this.showRecommend = e.detail.value;
    },
    // 探索半径滑块变更
    onRadiusChange(e) {
      this.radius = e.detail.value;
    },
	
	// 切换播放/暂停
	    toggleMusic() {
	      if (this.isPlaying) {
	        this.audioCtx.pause();
	      } else {
	        this.audioCtx.play();
	      }
	    },
	    // 调整进度条
	    adjustProgress(e) {
	      const progress = e.detail.value;
	      if (this.audioCtx.duration > 0) {
	        const seekTime = (progress / 100) * this.audioCtx.duration;
	        this.audioCtx.seek(seekTime);
	    }
	 }
  },
  onUnload() {
      // 页面销毁时，销毁音频实例
      if (this.audioCtx) {
        this.audioCtx.destroy();
      }
   }
};
</script>

<style scoped>
.scroll-container {
  padding: 10px;
  box-sizing: border-box;
}
.swiper {
  height: 200px;
  margin-bottom: -10px;
}
.swiper-img {
  width: 100%;
  height: 100%;
}

/* 城市介绍模块文字样式 */
.city-intro {
  font-size: 14px; 
  line-height: 1.6; 
  color: #444; 
  padding: 0 10px; 
 }

/* 富文本中的段落间距*/
.city-intro p {
  margin-bottom: 12px;
}
.city-intro p:last-child {
  margin-bottom: 0;
}

.city-intro p span[style*="color: #007AFF"],
.city-intro p[style*="color: #007AFF"] {
  color: #007AFF !important;
}

/* 整体页面容器：浅灰色背景 */
.scroll-container {
  padding: 10px;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

.section {
  margin-bottom: 15px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  
.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

/* 合并模块内：视频部分样式*/
.video-wrapper {
  margin-bottom: 15px; /* 视频与音乐部分的间距 */
}

/* 合并模块内：音乐部分容器 */
.audio-wrapper {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 15px;
}

/* 音乐子标题*/
.audio-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 10px;
}

/* 音乐模块样式 */
.audio-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.audio-btn {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-color: #007AFF;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 10px 20px;
  margin-bottom: 15px;
}
/* 按钮文字样式 */
.btn-text {
  font-size: 15px;
  margin-bottom: -7px;
}

/* 图标容器 */
.btn-icon {
  width: 30px ;
  height: 30px ;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 播放图标：三角形*/
.play-icon {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
}

/* 暂停图标容器 */
.pause-icon {
  width: 17px;
  height: 25px;
  display: flex;
  justify-content: space-between;
}

/* 暂停图标：竖线 */
.pause-line {
  width: 4px;
  height: 80%;
  background-color: #fff;
  border-radius: 2px;
}
.btn-play, .btn-pause {
  background-color: #007AFF;
  color: #fff;
}
.audio-desc {
  margin-bottom: 10px;
  font-size: 16px;
  color: #666;
}
.audio-slider {
  width: 100%;
  max-width: 260px;
}
.picker {
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 4px;
}
.preference-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.preference-item radio-group {
  display: flex;
}
.preference-item radio {
  margin-right: 15px;
}
.video {
  width: 100%;
  height: 300px;
}
</style>